// 头部

;(function(){
    $(function(){
        $('.lxy-headpage').load('../head_foot/dyp-index-temp.html')
    })
// 鲜花选项卡
    window.onload = function(){
        var oImg = document.querySelectorAll('.lxy-big>img')
        var oP = document.querySelectorAll('.lxy-small>p')
        oP.forEach(function(ele,index){
            ele.onmouseenter = function(){
                // alert(1)
                for(let i = 0; i < oP.length; i++){
                    oImg[i].className = ''
                }
                oImg[index].className = 'lxy-on'
            }
        })
    }
// 渲染数据
    let Box = document.querySelector('.lxy-box')
    let oSelect = document.querySelector('.lxy-select')
    let oDetail = document.querySelector('.lxy-detail')
    let oBrowse = document.querySelector('.lxy-browse')
    // let oCollect = document.querySelector('.lxy-collect')
    pAjax({
    url: '../server/detail.php',
    data: {
        id: localStorage.getItem('detailId') - 0
        
    }
    }).then(function (res) {
        let json = JSON.parse(res)
        oSelect.innerHTML = `
        
        <div class="lxy-big">
        <img src="${json.listPic_220_240}" alt="" class="lxy-on" data-id = "${json.id}">
        <img src="../images/lud-1-10.jpg" alt="">
        <img src="../images/lud-1-11.jpg" alt="">
        <img src="../images/lud-1-2.jpg" alt="">
    </div>
    <div class="lxy-small">
        <p><img src="${json.listPic_220_240}" alt=""></p>
        <p><img src="../images/lud-1-4.jpg" alt=""></p>
        <p><img src="../images/lud-1-5.jpg" alt=""></p>
        <p><img src="../images/lud-1-6.jpg" alt=""></p>
    </div>`
    oDetail.innerHTML = `
        <h3>${json.det_title_utf8}</h3>
        <span>${json.Pdt_title_utf8}</span>
        <p class="color1">${json.pdt_show_utf8}</p>
        <div class="lxy-sell">
            <div class="lxy-top">
                <span class="lxy-market">售价</span>
                <span>￥${json.price}</span>
                <span class="lxy-market ">市场价<i>￥${json.det_price}</i></span>
                <span>已售<u class="color1">6.66万</u>件</span>
            </div>
            <div>
                <span class="fl">APP/微信专享价<del>¥557</del></span>
                <div class="lxy-qr-App fl clear">
                    <a href="javascript:;">去APP购买<span class="lxy-img fr"></span></a>
                    <p class="lxy-come" id="lxy-come">
                        <img src="../images/lxy-app_qrcode.jpg" alt="">
                        <span>新人专享100元大礼包</span>
                    </p>
                </div>
                <div class="lxy-qr-App fl clear">
                    <a href="javascript:;">去微信购买<span class="lxy-img fr"></span></a>
                    <p class="lxy-come" id="lxy-come">
                        <img src="../images/lxy-tempqrpic.jpg" alt="">
                        
                    </p>
                </div>
            </div> 
        </div>
         <!-- 花语 -->
        <div class="lxy-flower">
            <div>
                <span>花语</span>
                <p>${json.detail_huayu_utf8}</p>
            </div>
            <div class="clear">
                <span class="fl">材料</span>
                <p class="fr">${json.detail_cailiao_utf8}</p>
            </div>
        </div>

        <!-- 配送 -->
        <div class="lxy-distribution">
            <span>配送说明</span>
            <span>全国(小城市请提前一天预定)</span>
        </div>

        <div class="lxy-arrive">
            <span>配送至</span>
            <div>
                <span class="color1">请选择<b class="lxy-address"></b></span>
                <div class="lxy-word" id="lxy-word">
                    <p>请选择</p>
                    <div>
                        <ul class="clear lxy-province">
                            <li>北京</li>
                            <li>上海</li>
                            <li>广东</li>
                            <li>江苏</li>
                            <li>北京</li>
                            <li>上海</li>
                            <li>广东</li>
                            <li>江苏</li>
                            <li>北京</li>
                            <li>上海</li>
                            <li>广东</li>
                            <li>江苏</li> -->
                        </ul>
                    </div>
                </div> 
                <!-- 市 -->
                 <div class="lxy-town">
                    <div class="clear">
                        <p class="fl">北京</p>
                        <p class="fl">请选择</p>
                    </div>
                    <div>
                        <ul>
                            <li>朝阳区</li>
                            <li>海淀区</li>
                            <li>西域区</li>
                            <li>东城区</li>
                        </ul>
                    </div>
                </div>

                <div class="lxy-town">
                    <div class="clear">
                        <p class="fl">上海</p>
                        <p class="fl">请选择</p>
                    </div>
                    <div>
                        <ul>
                            <li>浦东新区</li>
                            <li>闵行区</li>
                            <li>西域区</li>
                            <li>东城区</li>
                        </ul>
                    </div>
                </div>

                <div class="lxy-town">
                    <div class="clear">
                        <p class="fl">广东</p>
                        <p class="fl">请选择</p>
                    </div>
                    <div>
                        <ul>
                            <li>朝阳区</li>
                            <li>海淀区</li>
                            <li>西域区</li>
                            <li>东城区</li>
                        </ul>
                    </div>
                </div>

                <div class="lxy-town">
                    <div class="clear">
                        <p class="fl">江苏</p>
                        <p class="fl">请选择</p>
                    </div>
                    <div>
                        <ul>
                            <li>浦东新区</li>
                            <li>闵行区</li>
                            <li>西域区</li>
                            <li>东城区</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

        <!-- 加入购物车 -->

        <div class="lxy-shop color1">
            <span></span>
            加入购物车
        </div>
        <div class="lxy-buy">
            立即购买
        </div>
        <!-- 收藏 -->
        <p class="lxy-collect">
            <span></span>
            <span class="lxy-product">收藏商品</span>
            
        </p>`
        
        // 地址选项卡
        $('.lxy-province').find('li').click(function(){
            let index = $(this).index()

            $('.lxy-town').eq(index).addClass('lxy-appear')
            .siblings().removeClass('lxy-appear')

            $('.lxy-word').removeClass('lxy-appear')

            if($('.lxy-town')){
                $('.lxy-word').removeClass('lxy-appear')
            } else {
                $('.lxy-word').addClass('lxy-appear')
                $('.lxy-town').eq(index).addClass('lxy-appear')
            .siblings().removeClass('lxy-appear')
            }
        })
        $('.lxy-arrive>div>span').mouseenter(function(){
            $('.lxy-word').addClass('lxy-appear')
        })

        $('.lxy-arrive>div').mouseleave(function(){
            $('.lxy-word').removeClass('lxy-appear')
        })

        $('.lxy-town').mouseleave(function(){
            $(this).removeClass('lxy-appear')
        })
    })

    // 浏览记录
    pAjax({
        url: '../server/detail.php',
        data: {
            id: localStorage.getItem('RecentArr ') - 0
        }
    }).then(function (res) {
        let json = JSON.parse(res)
        // console.log(json)

        let oDiv = document.createElement('div')
        oDiv.className = 'clear'
        oDiv.innerHTML = `<img src="${json.listPic_220_240}" alt="" class="fl">
        <p class="fl color2">${json.det_title_utf8}</p>
        <br>
        <p class="fl">￥${json.price}</p>`
        oBrowse.insertBefore(oDiv,oBrowse.children[0])
    })

    // 加入购物车
        let arr1 = []
        let arr2 = []
            oDetail.addEventListener('click',function(ev){
                if(ev.target.className === 'lxy-shop color1'){
                    let n1 = ev.target.parentNode.previousElementSibling.children[0].children[0].getAttribute('data-id')-0
                    let iNow1 = 0
                    console.log(n1)
                    // 去重
                    var shop1 = localStorage.getItem('shopArr')
                    if (shop1) {
                        var oldarr1 = JSON.parse(shop1)
                        shopdj(oldarr1)
                    } else {
                        var oldarr1 = []
                        shopdj(oldarr1)
                    }
                    function shopdj(arr1){
                        function findArr1(arr1, n1) {
                            for (let i = 0; i < arr1.length; i++) {
                                // 有相同去++
                                if (arr1[i].id === n1) {
                                    iNow1 = i
                                    return true
                                }
                            }
                            return false
                        }
    
                        let flag1 = findArr1(arr1, n1)
                        if (flag1) {
                            // count++
                            arr1[iNow1].count++
                        } else {
                            // 没有值去填一个新对象
                            arr1.unshift({
                                id: n1,
                                pic: ev.target.parentNode.previousElementSibling.children[0].children[0].src,
                                scprice: ev.target.parentNode.children[3].children[0].children[2].children[0].innerHTML.slice(1)-0,
                                dgprice: ev.target.parentNode.children[3].children[0].children[1].innerHTML.slice(1)-0,
                                detail: ev.target.parentNode.children[1].innerHTML,
                                count: 1,
                            })
                        }
                        // 存到本地
                        console.log(arr1)
                        localStorage.setItem('shopArr', JSON.stringify(arr1))
                    }
                   
                } 
                
                var shop2 = localStorage.getItem('CollectArr') 
                if (shop2) {
                    var oldarr2 = JSON.parse(shop2)
                    shopdi(oldarr2)
                } else {
                    var oldarr2 = []
                    shopdi(oldarr2)
                }
                function shopdi(arr2){
                    if(ev.target.className === 'lxy-product'){
                        // 加入收藏
                        let n2 = ev.target.parentNode.parentNode.previousElementSibling.children[0].children[0].getAttribute('data-id')-0
                        let iNow2 = 0
                        // 去重
                        function findArr2(arr2, n2) {
                            for (let j= 0; j < arr2.length; j++) {
                                // 有相同去++
                                if (arr2[j].id === n2) {
                                    iNow2 = j
                                    return true
                                }
                            }
                            return false
                        }
            
                        let flag2 = findArr2(arr2, n2)
                        if (flag2) {
                            arr2[iNow2].count++
                        } else {
                            arr2.unshift({
                                id: n2,
                                pic: ev.target.parentNode.parentNode.previousElementSibling.children[0].children[0].src,
                                scprice: ev.target.parentNode.parentNode.children[3].children[0].children[2].children[0].innerHTML.slice(1)-0,
                                dgprice: ev.target.parentNode.parentNode.children[3].children[0].children[1].innerHTML.slice(1)-0,
                                detail: ev.target.parentNode.parentNode.children[1].innerHTML,
                                count: 1,
                            })
                        }
                        // 存到本地
                        localStorage.setItem('CollectArr', JSON.stringify(arr2))
                    
                    }
                }

            })  
    window.onload = function(){

        $('.lxy-product').click(function(){
            $('.lxy-login').css('display','block')
            $('.lxy-body').css('display','block')
            document.documentElement.style.overflow='hidden';
        })
    }
    
    
    
    
})();   

    


